<template>
  <div class="main">
    <Layout class="main-layout">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <div class="main-logo-left">幸福汇</div>

        <Menu :active-name="$route.name" theme="dark" width="auto" :class="menuitemClasses" @on-select="changeMenu" accordion>
          <MenuItem name="homeIndex"><Icon type="home"></Icon>首页</MenuItem>

          <Submenu name="user">
            <template slot="title"><Icon type="person-stalker"></Icon><span>会员管理</span></template>
            <MenuItem name="userIndex">会员管理</MenuItem>
            <MenuItem name="userLayer">会员层次树</MenuItem>
            <MenuItem name="userDeposit">充值</MenuItem>
            <MenuItem name="userWalletGoodsSell">会员货卖出管理</MenuItem>
            <MenuItem name="userWalletGoodsLog">货总日志</MenuItem>
            <MenuItem name="userWalletCouponLog">购物券总日志</MenuItem>
            <MenuItem name="userWalletActivationLog">激活码总日志</MenuItem>
            <MenuItem name="userWalletTourismIntegrationLog">旅游积分总日志</MenuItem>
            <MenuItem name="userWalletDeclarationLog">报单币总日志</MenuItem>
            <MenuItem name="userAchievementStatistics">会员业绩统计</MenuItem>
            <MenuItem name="userAchievementLog">会员业绩日志</MenuItem>
          </Submenu>
					
          <MenuItem name="userMessageIndex"><Icon type="email"></Icon><span>留言管理</span></MenuItem>

          <Submenu name="admin">
            <template slot="title"><Icon type="ios-paper"></Icon><span>管理员管理</span></template>
            <MenuItem name="adminIndex">管理员</MenuItem>
            <!--<MenuItem name="adminRole">管理组</MenuItem>-->
            <!--<MenuItem name="adminRoleCreate">添加管理组</MenuItem>-->
          </Submenu>

					<MenuItem name="systemIndex"><Icon type="settings"></Icon><span>系统设置</span></MenuItem>

          <Submenu name="4">
            <template slot="title"><Icon type="ios-cart"></Icon><span>开店申请</span></template>
            <MenuItem name="userServiceApply">服务中心申请</MenuItem>
            <MenuItem name="userServiceIndex">区域代表列表</MenuItem>
          </Submenu>

          <MenuItem name="noticeIndex"><Icon type="ios-copy"></Icon><span>公告管理</span></MenuItem>
        </Menu>
     </Sider>

      <Layout>
        <Header class="main-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '20px 20px 0'}" type="navicon-round" size="24"></Icon>

          <Dropdown transfer trigger="click">
            <a href="javascript:void(0)"><span>Admin</span><Icon type="arrow-down-b"></Icon></a>
            <DropdownMenu slot="list">
              <!--<DropdownItem><button type="button" class="ivu-btn ivu-btn-text ivu-btn-small"><span>个人中心</span></button></DropdownItem>-->
              <DropdownItem><button type="button" class="ivu-btn ivu-btn-text ivu-btn-small" @click="logout"><span>退出登录</span></button></DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Header>

        <Content class="main-content">
          <Breadcrumb class="main-content-breadcrumb">
            <BreadcrumbItem>首页</BreadcrumbItem>
            <BreadcrumbItem>{{$route.meta.title}}</BreadcrumbItem>
          </Breadcrumb>

          <Content>
            <router-view></router-view>
          </Content>
        </Content>

        <Footer>&copy; Copyright 2016-2018 幸福汇</Footer>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import auth from '@/utils/auth';

export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  computed: {
    rotateIcon() {
      return ['menu-icon', this.isCollapsed ? 'rotate-icon' : ''];
    },
    menuitemClasses() {
      return ['menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
    }
  },
  methods: {
    collapsedSider() {
      this.$refs.side1.toggleCollapse();
    },
    changeMenu(name) {
      this.$router.push({name: name});
    },
    logout() {
			auth.removeToken();
      this.$router.push({name: 'login'});
    }
  }
}
</script>

<style>
.menu-icon{
  transition: all .3s;
}
.rotate-icon{
  transform: rotate(-90deg);
}

.main {
  background: #f5f7f9;
  position: relative;
  height: 100vh;
}
.main-layout {
  height: 100%;
}
.main-header-bar {
  padding: 0;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.main-logo-left {
  width: 100%;
  height: 64px;
  background-color: #fff;
  text-align: center;
  padding-top: 10%;
}
.main-layout .menu-item span{
  display: inline-block;
  overflow: hidden;
  width: 70px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}
.main-layout .menu-item i {
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.main-layout .collapsed-menu span {
  width: 0px;
}
.main-content {
  margin: 5px;
}
.main-content-breadcrumb {
  margin: 10px 0;
}
</style>